<template>
     <div>
         <el-table
                 :data="tableData"
                 border
                 style="width: 100%">
             <el-table-column
                     fixed
                     prop="empno"
                     label="编号"
                     >
             </el-table-column>
             <el-table-column
                     prop="ename"
                     label="姓名"
                     >
             </el-table-column>
             <el-table-column
                     prop="job"
                     label="岗位"
                     >
             </el-table-column>
             <el-table-column
                     prop="mgr"
                     label="领导编号"
                     >
             </el-table-column>
             <el-table-column
                     prop="hiredate"
                     label="入职日期"
                     >
             </el-table-column>
             <el-table-column
                     prop="sal"
                     label="薪水"
                     >
             </el-table-column>
             <el-table-column
                     prop="dept.dname"
                     label="部门"
                     >
             </el-table-column>
             <el-table-column
                     fixed="right"
                     label="操作"
                     width="100">
                 <template slot-scope="scope">
                     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                     <el-button type="text" size="small">编辑</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="currentPage"
                 :page-sizes="[4, 10, 15, 20]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
         </el-pagination>
     </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                tableData: [],
                total:0,
                pageSize:4,
                currentPage:1,
            }
        },
        //页面加载完毕后执行的方法
        created() {
            this.initTable();
        },
        //自定义的方法
        methods: {
            initTable(){
                this.$http.get("/emp/getAll/"+this.currentPage+"/"+this.pageSize).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            }
        }
    }
</script>

<style scoped>

</style>